<template>
	<view class="bg-white h-100 e-p-t-20" :style="[AppSkinVar]">
		<view>
			<e-input v-model="content" :placeholder="$t(`public.${props.type == 1 ? '请输入您的邮箱' : props.type == 2 ? '请输入您的手机号' :'请输入'}`)" :maxlength="props.type == 3 ? 20 : -1" border="bottom" clearable></e-input>
		</view>
		<view class="e-m-t-20 e-m-l-32" v-if="props.type == '3'">
			<text class="e-font-24 c-regular">{{ $t('setting.4-20个字符，可由中英文、数字组成') }}</text>
		</view>
		<view class="code-box e-flex e-flex-end e-p-l-20" v-else>
			<e-input v-model="code" :placeholder="$t('public.请输入验证码')" border="none" clearable></e-input>
			<e-code
				unique-key="register"
				ref="uCode"
				:start-text="$t('public.获取验证码')"
				:change-text="$t('public.X秒重新获取')"
				:end-text="$t('public.重新获取')"
				@change="codeChange"
			></e-code>
			<button class="code-btn bg-primary e-font-24 c-white" @tap="getCode">{{ codeTips }}</button>
		</view>
		<view class="e-p-l-30 e-p-r-30">
			<button class="sub-btn bg-primary" :class="{ 'is-ok': !isOk }" @tap="submit">{{ $t('common.保存') }}</button>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { ref, reactive,watch } from 'vue'
	import { updatePhoneBind, changeBindSms,postBindEmail,editNickName } from '@/common/request/api'
	import {
		useI18n,
		useCurrentInstance
	} from '@/common/hooks'


	import {
		onLoad
	} from '@dcloudio/uni-app'
	
	const ctx = useCurrentInstance()
	
	const props = defineProps<{
		type ?: string
		content ?: string
	}>()
	
	const isOk = ref(false)
	const type = ref('')
	const content = ref('')
	const code = ref('')
	const codeTips = ref('')
	const loading = ref(false)
	
	onLoad(() => {
		let title
		switch (props.type) {
			case '1':
				title = ctx.$t('setting.邮箱')
				break
			case '2':
				title = ctx.$t('setting.手机号码')
				break
			case '3':
				title = ctx.$t('setting.修改昵称')
				showTis.value = true
				break
		}
		uni.setNavigationBarTitle({
			title: title
		})
	})
	
	watch(content,(newVal,oldVal) => {
		if (type.value === '1') {
			if (newVal.length > 3) {
				isOk.value = true
			} else {
				isOk.value = false
			}
		} else {
			if (newVal) {
				isOk.value = true
			} else {
				isOk.value = false
			}
		}
	})
	
	const getCode = () => {
		if (ctx.$refs.uCode.canGetCode) {
			if (!content.value) {
				if (props.type == '1') {
					ctx.$toastApp(ctx.$t('setting.请输入您的邮箱'))
					return
				} else {
					ctx.$toastApp(ctx.$t('public.请输入您的手机号'))
					return
				}
			}
			changeBindSms({phone:content.value}).then(res => {
				if (res.code === 200) {
					ctx.$refs.uCode.start()
				}
				ctx.$toastApp(res.msg)
			})
		} else {
			ctx.$toastApp(ctx.$t('public.倒计时结束后再发送'))
		}
	}
	
	const codeChange = (text:string) => {
		codeTips.value = text
	}
	
	const submit = () => {
		console.log(isOk.value, 'iljj')
		if (!isOk.value) return
		let params
		switch (props.type) {
			case '1':
				params = {
					validCode: code.value,
					email: content.value
				}
				if (loading.value) return
				loading.value = true
				postBindEmail(params).then(res => {
					if (res.code == 200) {
						const title = ctx.$t('setting.修改成功')
						ctx.$toast(title, 'success')
						ctx.$back()
					}
				}).finally(() => {
					loading.value = false
				})
				break
			case '2':
				params = {
					code: code.value,
					phone: content.value
				}
				if (loading.value) return
				loading.value = true
				updatePhoneBind(params).then(res => {
					if (res.code == 200) {
						const title = ctx.$t('setting.修改成功')
						ctx.$toast(title, 'success')
						ctx.$back()
					}
				}).finally(() => {
					loading.value = false
				})
				break
			case '3':
				params = {
					nickname: content.value
				}
				if (loading.value) return
				loading.value = true
				editNickName(params).then(res => {
					if (res.code == 200) {
						const title = ctx.$t('setting.修改成功')
						ctx.$toast(title, 'success')
						ctx.$back()
					}
				}).finally(() => {
					loading.value = false
				})
				break
		}
		
	}
	
</script>

<style lang="scss" scoped>
page {
	padding: 0 20rpx;
}
:deep(.u-border-bottom) {
	border-color: #dfe3e6 !important;
}
.h-100 {
	height: 100vh;
}
.sub-btn {
	height: 100rpx;
	line-height: 100rpx;
	color: #ffffff;
	font-size: 30rpx;
	font-weight: 500;
	letter-spacing: 2rpx;
	border-radius: 50rpx;
	margin-top: 114rpx;
}
.code-box {
	padding: 20rpx 0;
	border-bottom: 2rpx solid #dfe3e6;
	.code-btn {
		height: 60rpx;
		line-height: 60rpx;
		letter-spacing: 2rpx;
		border-radius: 30px;
		margin: 0;
	}
}
</style>
